<template>
  <view class="password-login">
    <u-toast ref="uToast" />
    <view class="password-login__form">
      <u-form>
        <u-form-item left-icon="account" prop="name">
          <u-input v-model="phone" placeholder="请输入用户名" />
        </u-form-item>
        <u-form-item left-icon="lock" prop="name">
          <u-input
            type="password"
            :clearable="false"
            v-model="psd"
            placeholder="请输入密码"
          />
        </u-form-item>
      </u-form>
      <u-button
        class="mt-36"
        type="primary"
        hover-class="none"
        :custom-style="customStyle"
        @click="submit"
      >
        登录
      </u-button>
      <view class="mt-36 flex align-center justify-between">
        <text class="password-login__tip price-text"></text>
        <text class="password-login__tip" @click.stop="forgotPassword">
          忘记密码
        </text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      customStyle: {
        // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        backgroundColor: '#9D60FF',
      },
      // phone: '13590387457',
      // psd: 'abc888888',
      psd: null,
      phone: null,
      loginForm: {
        loginType: 'AGENT_APP',
        phone: null,
        username: null,
        cypherKey: null,
      },
      hasPermission: false, //复选框
    };
  },
  props: {
    isChecked: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    // 监听父组件复选框传递过来的值
    isChecked(newVal) {
      console.log('newVal----->66', newVal);
      if (newVal) {
        this.hasPermission = true;
      } else {
        this.hasPermission = false;
      }
    },
  },
  methods: {
    onPrivacy() {
      uni.navigateTo({
        url: '/pages/main/privacy/privacy',
      });
    },
    forgotPassword() {
      uni.navigateTo({
        url: '/pages/main/forgot-password/forgot-password',
      });
    },
    handleChangeType() {
      this.$emit('change', 'code');
    },
    // 登录事件
    submit() {
      // 判断是否选中隐私协议
      if (this.hasPermission === true) {
        // 判断手机号
        if (this.phone === null) {
          this.$zx.msg('手机号不能为空');
          return;
        }
        if (this.psd === null) {
          this.$zx.msg('密码不能为空');
          return;
        }
        let psd = this.psd;
        this.loginForm.username = this.phone;
        this.loginForm.phone = this.phone;
        // 这个就是rsa加密后的值
        this.loginForm.cypherKey = this.$zx.RSAencrypt(psd);
        this.$zx.user_api.phoneLogin(this.loginForm).then((data) => {
          console.log('phoneLogin------>87', data);
          uni.setStorageSync('token', data.loginToken);
          uni.setStorageSync('user_info', data.agentUser);
          uni.setStorageSync('agentNo', data.currentIdentity.agentNo);
          data.userType = 'staff';
          // 获取用户信息
          // if (data.userType === 'staff') {
          //   // 获取权限列表
          //   this.$zx.user_api.getUserInfo().then((info) => {
          //     console.log('info----->95', info);
          //     uni.setStorageSync('permissions', info.permissions);
          //     uni.setStorageSync('user_info', info);
          //   });
          // }
          uni.setStorageSync('login_role', data.userType);
          if (getCurrentPages().length === 1) {
            if (data.userType === 'staff') {
              uni.reLaunch({
                url: '/pages/staff-home/staff-home',
              });
            }
            // if (data.userType === 'worker') {
            //   uni.reLaunch({
            //     url: '/pages/worker-home/worker-home',
            //   });
            // }
          } else {
            uni.navigateBack({
              delta: 1,
            });
          }
        });
      } else {
        this.$zx.msg('请勾选隐私协议');
      }
    },
  },
};
</script>
<style scoped lang="scss">
.password-login {
  height: 100%;
  position: relative;

  &__form {
    border-radius: 24rpx;
    margin: 0 auto;
    position: relative;
    z-index: 11;
    padding: 28rpx;
    padding-top: 66rpx;
  }

  &__tip {
    color: $zx-content-color;
    font-size: 26rpx;
  }

  &__footer {
    font-size: 24rpx;
    &--link {
      color: $zx-theme-color;
    }
  }
}

.custom-style {
  height: 88rpx;
  background-color: $zx-theme-color !important;
}
</style>
